import React, { PropTypes } from 'react';
import classNames from 'classnames';

import './HeadLine.css';

export const HEAD_LINE_COLOR = { 
  BLUE: 'blue',
  GREEN: 'green',
  RED: 'red',
  ORANGE: 'orange',
};

/**
 * 見出し
 */
const HeadLine = (props) => {
  return (
    <div className={classNames('HeadLine', `color-${props.color}`)}
      id={props.id}
      {...props.others}>
      <div className={classNames('title', `level-${props.level}`, `color-${props.color}`)}>{props.children || props.title}</div>
    </div>
  )
}

/*HeadLine.propTypes = {
  level: PropTypes.number,
  title: PropTypes.string,
  color: PropTypes.string,
  id: PropTypes.string,
}*/

HeadLine.defaultProps = {
  level: 1,
  color: HEAD_LINE_COLOR.BLUE,
}

export default HeadLine
